<template>
    <div>
        <div class="breadcrumb-box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>我的足迹</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="collection container">
            <left-nav-bar :active="active"></left-nav-bar>
            <div class="right">
                <ul class="list" v-if="loading">
                    <li v-for="(item, index) in collectProductList" :key="index">
                        <div class="goods-box" @click="_goGoodsDetail(item)">
                            <img class="goods-img" :src="item.image" />
                            <div style="height:90px;padding-top: 20px;box-sizing:border-box;">
                            <div class="goods-name ellipsis" :title="item.store_name">{{ item.store_name }}</div>
                            <div class="goods-price td-fbc">
                                <span>¥{{ item.price }}</span>
                                <div class="del-btn" v-if="item.brand_name">品牌：{{item.brand_name}}</div>
                            </div>
                            </div>
                        </div>
                    </li>
                    <div class="nodata" v-if="collectProductList.length == 0">
                        <img :src="$global.Image.noGood" />
                    </div>
                </ul>
                <div class="pagination-box">
                    <el-pagination background layout="prev, pager, next" @current-change="pageChange" :page-size="limit" :total="count">
                    </el-pagination>
                </div>
            </div>
        </div>
        <div style="height: 200px"></div>
    </div>
</template>

<script>
import leftNavBar from "@components/leftNavBar";
import { getFootUser, getCollectDel } from "@api/user";

export default {
    data() {
        return {
            active: 4,
            loading: false,
            collectProductList: [],
            page: 1,
            count: "",
            limit: 9,
        };
    },
    components: {
        leftNavBar,
    },
    methods: {
        // 获取我的足迹
        getMyCollect() {
            let that = this;
            that.collectProductList = [];
            getFootUser(that.page, that.limit).then((res) => {
                //apply();js将一个数组插入另一个数组;
                that.count = res.data.count;
                that.collectProductList.push.apply(
                    that.collectProductList,
                    res.data.list
                );
                this.loading = true;
            });
        },
        // 变更页面
        pageChange(value) {
            this.page = value;
            this.getMyCollect();
        },
        //删除窗口
        openDel(index) {
            this.$confirm("确定要删除此商品吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.delCollection(index);
            });
        },
        //删除收藏；
        delCollection(index) {
            let that = this,
                id = that.collectProductList[index].pid,
                category = that.collectProductList[index].category;
            getCollectDel(id, category).then(function () {
                that.$message({
                    type: "success",
                    message: "删除成功!",
                });
                that.getMyCollect();
            });
        },
        // 进入商品详情
        _goGoodsDetail(item) {
            this.$router.push("/detail/" + item.id);
        },
        // 显示商品信息
        _showGoodsInfo(item) {
            this.$router.push("/detail/" + item.pid);
        },
    },
    mounted() {
        this.getMyCollect();
    },
};
</script>

<style scoped  rel="stylesheet/scss" lang="scss" scoped>
$color: #da213d;
.collection {
    margin: 0 auto;
    display: flex;

    .right {
        width: 1000px;
        min-width: 1000px;
        margin-left: 32px;

        .line-ti {
            width: 100%;
            border-bottom: 1px solid #dbdbdb;

            > div {
                color: #014a97;
                font-size: 18px;
                font-family: MicrosoftYaHei-Bold;
                border-bottom: 3px solid $color;
                width: 90px;
                line-height: 36px;
                font-weight: 600;
                text-align: center;
            }
        }

        .list {
            // margin-top: 40px;
            overflow: hidden;
            min-height: 410px;

            li {
                margin-bottom: 50px;
                float: left;
                width: 33.333333%;
                box-sizing: border-box;
                border: 1px solid #dedede;
                // padding: 20px 15px;

                .goods-box {
                    width: 100%;
                    // margin: auto;

                    .goods-img {
                        width: 100%;
                        height: 300px;
                        display: block;
                        cursor: pointer;
                        object-fit: cover;
                    }

                    .goods-name {
                        font-size: 16px;
                        color: #333;
                        cursor: pointer;
                        padding: 0 15px;
                        box-sizing: border-box;
                        text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
                    }

                    .goods-price {
                        margin-top: 5px;
                        padding: 0 15px;
                        // margin-bottom: 20px;
                        box-sizing: border-box;

                        span {
                            font-size: 16px;
                            font-weight: bold;
                            color: #da213d;
                        }

                        img {
                            display: block;
                            width: 23px;
                            height: 23px;
                            cursor: pointer;
                        }

                        .del-btn {
                            padding: 4px 14px;
                            box-sizing: border-box;
                            color: #da213d;
                            cursor: pointer;
                            text-align: center;
                            background: #fbf7f7;
                            border-radius: 2px;
                            border: 1px solid #eaa090;
                            transition: all 0.3s;
                        }
                    }
                }
            }

            // li:hover {
            //     background-color: #f8f8f8;
            // }

            // li:nth-child(4n + 4) {
            //     border-right: none;
            // }
        }

        .coll-list {
            display: flex;
            flex-flow: wrap;

            .li {
                height: 412px;
                width: 300px;
                padding-top: 40px;
                border-right: 1px solid #dbdbdb;
                border-bottom: 1px solid #dbdbdb;
                padding-left: 42px;
                cursor: pointer;

                .img-li {
                    width: 280px;
                    height: 280px;
                }

                > div:nth-of-type(1) {
                    color: rgba(51, 51, 51, 1);
                    font-size: 16px;
                    margin: 24px 0;
                    -webkit-line-clamp: 2;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                > div:nth-of-type(2) {
                    display: flex;
                    height: 21px;
                    align-items: center;
                    justify-content: space-between;

                    > div {
                        font-size: 16px;
                        color: #da213d;
                        font-weight: 600;
                    }

                    .icon-li {
                        width: 19px;
                        height: 16px;
                        margin-right: 65px;
                    }
                }
            }

            .li:nth-of-type(3n-2) {
                padding-left: 0;
            }

            .li:nth-of-type(3n) {
                border-right: none;
            }
        }
    }

    .page-box {
        margin-top: 40px;
    }
}
</style>
